<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img
            style="max-width: 100px; max-height: 100px;"
            :src="scope.row.coverImg | convertImg"
          />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="descriptions" label="简介"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row._id)">修改</el-button>
          <el-button type="danger" @click="sc(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="pageChange"
      layout="prev, pager, next"
      :page-count="pages"
    >
    </el-pagination>
  </div>
</template>
<script>
import { User, Delete } from "../../api/products";
export default {
  data() {
    return {
      list: [],
      pages: 1
    };
  },
  async created() {
    this.Res();
    // const res = await User(page)
    // this.list = res.data.products
    // this.pages = res.data.pages
  },
  filters: {
    convertImg(img) {
      return img.startsWith("http")
        ? img
        : "http://api.cat-shop.penkuoer.com" + img;
    }
  },
  methods: {
    async pageChange(page) {
      //console.log(page);
      this.Res(page);
    },
    async Res(page = 1) {
      const res = await User({ page });
      this.list = res.data.products;
      this.pages = res.data.pages;
    },
    edit(id) {
      this.$router.push({
        name: "edit",
        query: {
          id
        }
      });
    },
    sc(id) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
          console.log("111")
          Delete(id).then(res => {
            console.log(res);
            this.$router.go(0);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(err => {
          console.log(err)
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
.el-table {
  overflow: auto;
}
</style>
